<template>
  <div class="tiwen">
    <div class="tiwen-content">
      <div class="tiwen-title">每日快报/出入校门排查</div>
      <h5 class="tiwen-h2">进出校门统计</h5>
      <div class="tiwen-input">
        <p>学号：</p>
        <el-input placeholder="请输入内容" v-model="idCard" clearable></el-input>
      </div>
      <div class="tiwen-input">
        <p>身份证号：</p>
        <el-input placeholder="请输入内容" v-model="snoTno" clearable></el-input>
      </div>
<div>
  <span style="padding-left: 20px;  font-size: 14px;
  color: rgb(90, 90, 90);">学院</span>
    <el-select style="padding-left: 20px;" v-model="list.name"   placeholder="请选择学院" >
     <el-option  :value="i.name" v-for="(i,index) in list" :key="index" @click.native="select(index)" >{{i.name}}</el-option>
    </el-select>
      <span style="padding-left: 20px;  font-size: 14px;
  color: rgb(90, 90, 90);">专业</span>
  <el-select style="padding-left: 20px;" v-model="xueyuan.zhuanye"   placeholder="请选择专业" >
     <el-option  :value="i.zhuanye" v-for="(i,index) in xueyuan" :key="index" @click.native="select1(index)"  >{{i.zhuanye}}</el-option>
    </el-select>
   <span style="padding-left: 20px;  font-size: 14px;
  color: rgb(90, 90, 90);">班级</span>
   <el-select style="padding-left: 20px;" v-model="classname.classid" placeholder="请选择班级" >
     <el-option  :value="i.classid" v-for="(i,index) in classname" :key="index" >{{i.classid}}</el-option>
    </el-select>
</div>

      <div class="riqi-input">
        <p>时间（精确到分）:</p>
        <div class="block">
          <el-date-picker v-model="beginTime" type="datetime" placeholder="选择日期"></el-date-picker>

          <span style="color: #5c6cae;margin-left:10px;margin-right:10px;">至</span>
          <el-date-picker v-model="endTime" type="datetime" placeholder="选择日期"></el-date-picker>
        </div>
      </div>
      <div>
        <div style="padding-left:20px; padding-bottom: 20px; padding-top: 10px;">
 <el-button
          type="primary"
          style="width:155px;color:white;background-color:#5458b3;"
          @click="tiwenlist"
          >点击查询
        </el-button>
        </div>
      </div>
      <div class="tiwen-table">
        <el-table
          :data="tableData"
          border
          style="width: 90%"
          :header-cell-style="{background:'#5058b1',color:'#fff'}">
          <el-table-column type="index" label="#" width="50"></el-table-column>
          <el-table-column prop="name" label="姓名" width="100"></el-table-column>
          <el-table-column prop="info" label="个人信息" width="200"></el-table-column>
          <el-table-column prop="data" label="日期" width="100"></el-table-column>
          <el-table-column prop="bodyTemperature1" label="体温" width="100"></el-table-column>
          <el-table-column prop="symptom" label="是否不适" width="200"></el-table-column>
          <el-table-column prop="isNeighborBorderlineCase" label="同住人员出现不适"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import Api from "../assets/js/api";
export default {
  data() {
    return {
      idCard: "",
      snoTno: "",
      beginTime: "",
      endTime: "",
  list:[{
    name:"理工学院",
    id:[{
      zhuanye:"软件工程",
      class:[{
classid:"一班"
      },{
classid:"二班"
      },
      ]
    },
    {
      zhuanye:"安全工程",
      class:[{
classid:"一班"
      },{
classid:"二班"
      },
      ]
    },
    ]
  },
  {
    name:"7777",
    id:"7"
  },
  ],
xueyuan:"",
classname:"",
   tableData:[],
      datalist: [],
    };
  },
  mounted() {

  },
  methods: {
    select(e){
this.xueyuan=this.list[e].id
console.log(this.xueyuan)
    },
        select1(e){
this.classname=this.xueyuan[e].class
console.log(this.classname)
    },

    tiwenlist() {
          if (this.idCard == "" || this.snoTno == "") {
        alert("请求参数格式不正确；学号/工号和身份证号不能都为空");
      } else {
        let from = new FormData();
        from.append("snoTno", this.snoTno);
        from.append("idCard", this.idCard);
        from.append("beginTime", this.beginTime);
         from.append("endTime", this.endTime);
        this.$http({
          url: Api.jinchuxiaomen,
          method: "POST",
          data: from,
        }).then((res) => {
          console.log(res);
          this.tableData = res.data.list;
        });
      }
    }
  }
};
</script>
<style scoped>
.tiwen {
  padding: 30px;
}
.tiwen-content {
  width: 100%;
  border-radius: 12px;
  background-color: #ffffff;
}
.tiwen-title {
  height: 55px;
    font-size: 24px;
  color: #a2a9d4;
  line-height: 55px;
  text-indent: 20px;
  border-bottom: 1px solid #ececff;
  margin-bottom: 15px;
}

.tiwen-table {
  margin-left: 20px;
  padding-bottom: 50px;
  box-sizing: border-box;
}
.tiwen-h2 {
  margin-left: 20px;
  padding-bottom: 30px;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.7);
}
.tiwen-input {
  width: 250px;
  margin-left: 20px;
  display: inline-block;
  padding-bottom: 20px;
}
.tiwen-input > p {
  padding-bottom: 10px;
  font-size: 14px;
  color: rgb(90, 90, 90);
}
.riqi-input {
  padding-left: 20px;
  padding-bottom: 20px;
}
.riqi-input > p {
    padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  color: rgb(90, 90, 90);
}


</style>